<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@page import="com.xccwk.model.*"%>
<%@ page isELIgnored="false"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet"
	href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="css/common.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<style>

</style>
</head>

<!-- <script>
		if(${listUser}==null){
			window.location.href="http://localhost:8080/WkStudy/he";
		}
	</script> -->

<script type="text/javascript">
	var w, h, className;
	function getSrceenWH() {
		w = $(window).width();
		h = $(window).height();
		$('#dialogBg').width(w).height(h);
	}

	window.onresize = function() {
		getSrceenWH();
	}
	$(window).resize();

	$(function() {
		getSrceenWH();

		//添加列表
		$('.add').click(
				function() {
					className = $(this).attr('class');
					$('#dialogBg').fadeIn(300);
					$('#dialog').removeAttr('class').addClass(
							'animated ' + className + '').fadeIn();
				});

		$('.vuage_select')
				.click(
						function() {
							var s = document.getElementById("sp");
							var like = s.value;
							window.location.href = "http://localhost:8080/WkStudy/Vuage?like="
									+ like;
						});

		$('.delete')
				.click(
						function() {
							var x;
							var id = prompt("请输入id", "");
							window.location.href = "http://localhost:8080/WkStudy/Delete?id="
									+ id;
						});

		//关闭弹窗
		$('.claseDialogBtn').click(function() {
			$('#dialogBg').fadeOut(300, function() {
				$('#dialog').addClass('bounceOutUp').fadeOut();
			});
		});
	});
</script>
<body style="margin-top: 15%; margin-left: 35%; font-size: 16px">

	<div style="margin-top: 10%;margin-left: 15%"><c:if test="${flag}">插入错误</c:if></div>
	<div>
		<table style="width: 600px">
			<tr>
				<td></td>
				<td></td>
				<td><input type="text" id="sp" type="search" name="searchname"
					class="search_in"
					style="border: 1px solid #000; width: 190px; height: 25px" /> <input
					type="submit" value="搜索" class="vuage_select"
					style="width: 90px; height: 30px; style =margin-left: 35%;" /> <input
					type="submit" value="减少" class="delete"
					style="width: 90px; height: 30px;" /> <input type="submit"
					value="增加" class="add" style="width: 90px; height: 30px;" /></td>
			</tr>
			<tr>
				<th style="">id</th>
				<th style="">用户名</th>
				<th style="">密码</th>
			</tr>
			<c:forEach items="${listUser}" var="user">
				<tr>
					<td style="text-align: center;">${user.id}</td>
					<td style="text-align: center;">${user.userName}</td>
					<td style="text-align: center;">${user.userPassword}</td>
				</tr>
			</c:forEach>
		</table>
	</div>

	<!-- 弹出框 -->
	<div class="box">
		<div id="dialogBg"></div>
		<div id="dialog" class="animated">
			<img class="dialogIco" width="50" height="50" src="images/ico.png"
				alt="" />
			<div class="dialogTop">
				<a href="javascript:;" class="claseDialogBtn">关闭</a>
			</div>
			<form action="http://localhost:8080/WkStudy/Save" method="get"
				id="editForm" onsubmit="return toVaild()">
				<ul class="editInfos">
					<li><label><font color="#ff0000"></font>用户id：<input
							type="text" name="id" required value="" class="ipt" /></label></li>
					<li><label><font color="#ff0000"></font>用户名：<input
							type="text" name="username" required value="" class="ipt" /> </label></li>
					<li><label><font color="#ff0000"></font>密&nbsp;&nbsp;&nbsp;码：<input
							type="password" name="password" required value="" class="ipt" /></label></li>
					<li><input type="submit" value="确认提交" class="submitBtn" /></li>
				</ul>
			</form>
		</div>
	</div>













</body>

<script>
	/*
	 * 保存数据
	 */
	function save() {
		var x;
		console.log("asd");
		var id = prompt("id", "1001");
		var username = prompt("用户名", "xcc");
		var password = prompt("密码", "hello");
		console.log("http://localhost:8080/WkStudy/save?id=" + id + "username="
				+ username + "password=" + password);
		window.location.href = "http://localhost:8080/WkStudy/save?id=" + id
				+ "&username=" + username + "&password=" + password;
	}

	/*
	 * 删除数据
	 */
	function delete_user() {
		var x;
		var id = prompt("请输入id", "");
		window.location.href = "http://localhost:8080/WkStudy/delete?id=" + id;
	}

	/*
	 * 检索数据
	 */
	function vuage_select() {
		var s = document.getElementById("sp");
		var like = s.value;
		window.location.href = "http://localhost:8080/WkStudy/vuage?like="
				+ like;
	}

	/*
	 * 提交之前验证
	 */
	function toVaild() {
		/* 	var s = document.getElementById("ipt");
		var like = s.value;
		window.location.href = "http://localhost:8080/WkStudy/vaild?like="
				+ like; */
		var val = document.getElementById("ipt").value;
		alert(val);
		if (val == "可以提交") {
			alert("校验成功，之后进行提交");
			return true;
		} else {
			alert("校验失败，不进行提交");
			return false;
		}
	}
</script>






</html>